<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WebSocket Demo</title>
    <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var ws = new WebSocket('ws://' + window.location.host + '/WebSocketServletByMe');

            ws.onopen = function () {
                console.log('ws is open');
            };

            ws.onmessage = function (message) {
                console.log(message.data);
                $('#getInfo').append(message.data);
            };

            ws.onclose = function () {
                console.log('ws is close!!');
            };

            $("#btn").click(function () {
                var username = $('#uName').val();
                var content = $('#content').val();

                /*调用ws发送消息到服务端,服务端返回消息到ws.onmessage().*/
                ws.send(username + " : " + content);
            });

        });


    </script>
</head>
<body>
<h1 style="color: red">比目鱼工作室的聊天系统主界面</h1>

<div id="getInfo" style="width:700px;height:400px;border:1px solid #000000">

</div>

<div>
    <input type="hidden" name="uName" id="uName" value="<%=session.getAttribute("username")%>"/>
    <%=session.getAttribute("username")%> :
    <input type="text" name="content" id="content"/>
    <button type="button" id="btn">发言</button>

</div>
</body>
</html>